<template>
  <div class="my_pagination_container">
    <el-pagination
      background
      :page-size="size"
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      :total="total"
      v-if="total > size"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "MyPagination",
  props: ["total", "size", "category"],
  methods: {
    handleCurrentChange(val) {
      // 修改当前页码数
      this.$parent.pagina.current = val;
    },
  },
};
</script>

<style lang="less" scoped>
// 处理分页器
.my_pagination_container {
  padding: 30px 0 70px;
  border-radius: 8px;
  font-size: 13px;
  font-family: "微软雅黑";
  /deep/ .el-pagination {
    display: flex;
    position: relative !important;
    & > button[disabled] {
      color: #ccc !important;
      background: #f4f4f5 !important;
      opacity: 0.7 !important;
      cursor: url("@/assets/mouse/x1.cur"), auto !important;
    }
    & > button {
      border-color: #ccc0 !important;
      // color: #666 !important;
      color: var(--a-button-hover-color);
      padding: 5px 10px;
      line-height: 1;
      background: #f4f5f6 !important;
      position: absolute !important;
      width: 37px;
      height: 34px;
      &:nth-of-type(1) {
        right: 40px;
        & > i::before {
          font-size: 15px;
          content: "❮";
        }
      }
      &:nth-of-type(2) {
        right: 0px;
        & > i::before {
          font-size: 15px;
          content: "❯";
        }
      }
    }
  }
  /deep/ .el-pager {
    li {
      &.active {
        background: #f4f4f5 !important;
        color: #ccc !important;
        opacity: 0.7 !important;
        cursor: url("@/assets/mouse/x1.cur"), auto !important;
        &:hover {
          color: #ccc !important;
        }
      }
      &:hover {
        color: var(--a-button-hover-color);
      }
      &.el-icon-d-arrow-right {
        &::before {
          line-height: 19px !important;
          content: "\e794" !important;
        }
      }
      &:not(.active) {
        cursor: url("@/assets/mouse/x2.cur"), auto !important;
      }
      font-size: 15px !important;
      border-color: #ccc0;
      color: var(--a-button-hover-color);
      line-height: 34px;
      background: #f4f5f6;
      height: 34px;
      width: 37px;
      border-radius: 6px;
    }
  }
}
</style>